<template>
  <div class="app-container">
    <el-card class="divHead">
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="仓库编码" prop="code">
              <el-input
                v-model="form.code"
                placeholder="请输入"
                clearable
                disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入"
                clearable
                maxlength="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in warehouseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item label="省/市/区" prop="location">
              <el-cascader
                v-model="form.location"
                :options="locationOptions"
                :props="{ expandTrigger: 'hover' }"
                clearable
                style="width: 100%"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" />
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入"
                clearable
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="仓库面积" prop="surface" class="formInfoTip">
              <el-input
                v-model.number="form.surface"
                placeholder="请输入"
                clearable
                type="number"
              ><span slot="append">m³</span></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
              <el-input
                v-model="form.personName"
                placeholder="请输入"
                clearable
                maxlength="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="buttonBox">
          <el-button round class="unimportanceButton">返回</el-button>
          <el-button round class="minorImportantButton" @click="submit">提交</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { codeFactory, Addwarehouse } from '@/api/baseInfo/warehouse'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      locationOptions: regionData,
      form: {
        code: '',
        name: '',
        status: '1',
        location: '',
        address: '',
        surface: null,
        personName: '',
        phone: '',
        type: '',
        province: '',
        city: '',
        area: ''
      },
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择仓库类型', trigger: 'change' }],
        location: [{ required: true, message: '请选择区域', trigger: 'change' }],
        status: [{ required: true, message: '请选择仓库状态', trigger: 'change' }],
        phone: [{ required: false, pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, trigger: 'blur' }],
        personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }]
      },
      warehouseTypeOptions: [
        {
          value: 'ZZ',
          label: '中转仓库'
        },
        {
          value: 'JG',
          label: '加工仓'
        },
        {
          value: 'CB',
          label: '储备仓'
        },
        {
          value: 'LC',
          label: '冷藏仓'
        }
      ],
      loading: false
    }
  },
  async created() {
    const { data } = await codeFactory()
    this.form.code = data
  },
  methods: {
    handleChange(val) {
      this.form.location = val
      if (this.form.location.length > 0) {
        this.form.province = CodeToText[this.form.location[0]]
        this.form.city = CodeToText[this.form.location[1]]
        this.form.area = CodeToText[this.form.location[2]]
      }
      this.form.location = `${this.form.province}/${this.form.city}/${this.form.area}`
    },
    submit() {
      this.$refs.ruleForm.validate(async(isOk) => {
        if (!isOk) return
        this.loading = true
        await Addwarehouse(this.form)
        // 清空表单--
        this.$refs.ruleForm.resetFields()
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
</style>
